<template>
	<view class="relative w-full full-screen flex flex-col items-center justify-center bg-surface dark:bg-surface-dark">
		<!-- <image class="absolute w-full h-full z-0 opacity-60" src="/static/images/login/bg_login.png" mode="aspectFill"></image> -->
		<view class="w-4/5 p-10 flex flex-col items-center z-1 rounded-lg bg-white/90 dark:bg-gray-800/90 shadow-lg">
			<image class="size-50 rounded-lg" src="/static/images/index/logo.png" mode="aspectFit"></image>
			<view class="text-center my-10">
				<text class="block text-3xl font-bold text-gray-800 dark:text-gray-200 mb-5">欢迎使用</text>
			</view>
			<view class="w-full flex flex-col items-center">
				<button @click="wxLogin" class="w-full py-2 flex items-center justify-center text-white text-lg font-medium rounded-full bg-gradient-to-r from-green-500 to-green-600 shadow-md">
					<text>微信一键登录</text>
				</button>
				<view class="mt-8 text-xs text-gray-500 dark:text-gray-400 flex flex-col items-center">
					<text>登录即表示您同意</text>
					<text class="mt-2">
						<text class="text-primary dark:text-primary-dark underline" @click="openAgreement('userAgreement')">《用户协议》</text>
						<text>和</text>
						<text class="text-primary dark:text-primary-dark underline" @click="openAgreement('privacyPolicy')">《隐私政策》</text>
					</text>
				</view>
			</view>
		</view>

		<!-- 协议弹窗 -->
		<tui-modal :show="showPopup" @cancel="closePopup" :backgroundColor="theme?.surface()" custom
			maskColor="rgba(0, 0, 0, 0.6)">
			<view class="w-full flex flex-col overflow-hidden">
				<view class="p-8 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
					<text class="text-lg font-bold text-gray-800 dark:text-gray-200">{{ popupTitle }}</text>
					<text class="text-2xl text-gray-500 dark:text-gray-400 w-15 h-15 flex items-center justify-center"
						@click="closePopup">×</text>
				</view>
				<scroll-view class="p-8 max-h-[50vh]" scroll-y="true">
					<text class="text-sm text-gray-600 dark:text-gray-400 leading-6 text-justify whitespace-pre-line">{{
						popupContent }}</text>
				</scroll-view>
				<view class="p-5 border-t border-gray-200 dark:border-gray-700 flex justify-center">
					<view
						class="bg-primary dark:bg-primary-dark text-onPrimary dark:text-onPrimary-dark text-sm py-4 px-10 rounded-full"
						@click="closePopup">我已阅读并同意</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script lang="ts" setup>
import tui from '@/common/httpRequest';
import { ref, getCurrentInstance } from 'vue';
import tuiModal from '@/components/thorui/tui-modal/tui-modal.vue';

const instance = getCurrentInstance();
const theme = instance?.appContext.config.globalProperties.$theme;

const showPopup = ref(false);
const popupTitle = ref('');
const popupContent = ref('');

// 协议内容
const userAgreementText = `
用户协议

1. 总则
欢迎您使用我们的服务。本协议是您与我们之间关于使用我们服务的法律协议。

2. 服务内容
我们提供的服务内容包括但不限于：用户注册、信息浏览、内容发布等功能。

3. 用户注册与账户
3.1 您需要注册成为用户才能使用我们的部分服务。
3.2 您应当提供真实、准确、完整的用户信息。
3.3 您应当妥善保管账户信息，对您账户下的所有行为负责。

4. 用户行为规范
4.1 您应当遵守中华人民共和国法律法规。
4.2 您不得利用我们的服务从事违法违规活动。
4.3 您不得干扰我们服务的正常运行。

5. 知识产权
我们服务中的内容（包括但不限于文字、图片、音频、视频、图表、标识、版面设计、电子文档等）的知识产权归我们或相关权利人所有。

6. 协议修改
我们保留随时修改本协议的权利，修改后的协议会在平台上公布。

7. 免责声明
因不可抗力或其他非我们所能控制的原因导致的服务中断、数据丢失等情况，我们不承担责任。

8. 其他
本协议的解释、效力及纠纷的解决，适用于中华人民共和国大陆地区法律。
`;

const privacyPolicyText = `
隐私政策

1. 信息收集
我们可能收集您的以下信息：
1.1 您提供的信息：如注册信息、发布内容等。
1.2 设备信息：如设备型号、操作系统、唯一设备标识符等。
1.3 日志信息：如IP地址、浏览器类型、访问日期和时间等。

2. 信息使用
我们可能将收集的信息用于：
2.1 提供、维护和改进我们的服务。
2.2 开发新的服务或功能。
2.3 保护我们和用户的安全。

3. 信息共享
除以下情况外，我们不会与第三方共享您的个人信息：
3.1 经您同意。
3.2 为满足法律法规要求。
3.3 保护我们及其他用户的合法权益。

4. 信息安全
我们采取合理措施保护您的信息安全，但请注意互联网环境并非百分之百安全，我们无法保证您的信息绝对安全。

5. 信息存储
我们会在必要的时间内保存您的个人信息。

6. 儿童隐私
我们的服务不面向13岁以下儿童，如果我们发现自己收集了13岁以下儿童的个人信息，我们会尽快删除。

7. 隐私政策的变更
我们可能会不时更新本隐私政策，更新后的隐私政策将在平台上公布。

8. 联系我们
如您对本隐私政策有任何疑问，可通过平台提供的联系方式与我们联系。
`;

function wxLogin() {
	uni.login({
		provider: 'weixin',
		success: (res) => {
			if (res.code) {
				// 将 code 发送到后端服务器
				tui.request('/auth/login', 'POST', {
					code: res.code
				}, true, false, false).then((res: any) => {
					if (res.code === 0) {
						uni.setStorageSync('openid', res.data);
						uni.navigateTo({
							url: '/pages/diary/add'
						});
					}
				});
			} else {
				console.log('登录失败，未获取到 code:', res.errMsg);
			}
		},
		fail: (err) => {
			console.log('uni.login 失败:', err);
		}
	});
}

// 打开协议弹窗
function openAgreement(type: 'userAgreement' | 'privacyPolicy') {
	if (type === 'userAgreement') {
		popupTitle.value = '用户协议';
		popupContent.value = userAgreementText;
	} else {
		popupTitle.value = '隐私政策';
		popupContent.value = privacyPolicyText;
	}
	showPopup.value = true;
}

// 关闭协议弹窗
function closePopup() {
	showPopup.value = false;
}
</script>

<style lang="scss">
.login-container {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
}

.login-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.6;
}

.login-content {
	width: 80%;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
	border-radius: 20rpx;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.logo-area {
	margin-bottom: 60rpx;
}

.logo {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
}

.welcome-text {
	text-align: center;
	margin-bottom: 80rpx;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.btn-area {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(to right, #07c160, #10ad7a);
	border-radius: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 10rpx 20rpx rgba(7, 193, 96, 0.3);
	border: none;
}

.login-btn::after {
	border: none;
}

.wechat-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.privacy-text {
	margin-top: 30rpx;
	font-size: 24rpx;
	color: #999;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.link-text {
	color: #07c160;
	text-decoration: underline;
}

// 协议弹窗样式
.agreement-modal {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.agreement-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}

.agreement-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.agreement-close {
	font-size: 40rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.agreement-body {
	padding: 30rpx;
	max-height: 50vh;
}

.agreement-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	text-align: justify;
	white-space: pre-line;
}

.agreement-footer {
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #eee;
	display: flex;
	justify-content: center;
}

.agreement-btn {
	background-color: #07c160;
	color: #fff;
	font-size: 28rpx;
	padding: 16rpx 40rpx;
	border-radius: 40rpx;
}
</style>